<style scoped lang="less">
  .classification{
    .measure{
      font-size: 16px;
      text-align: center;
      border: 1px solid #aaa;
      width: 120px;
      padding: 0;
      margin-right: 30px;
      line-height: 30px;
      cursor: pointer;
    }
    .active{
      background: url("../../../static/image/ts_2.png");
      background-size: 100% 100%;
      color: #fff;
      line-height: 32px;
      border: none!important;
    }
  }
</style>
<template>
  <div id="comment">
    <div class="my-comment">
      <div class="left all-classification">
        全部:
      </div>
      <div class="classification">
        <ul>
          <li @click="current = 1" id="car-measure" class="left measure" :class="current === 1? 'active' : ''">
            爱车测评
          </li>
          <li @click="toSer" id="serve-measure" class="left measure" :class="current === 2? 'active' : ''">
            服务测评
          </li>
        </ul>
      </div>
      <div v-show="current === 1" class="measure-list">
        <div v-if="hasComCar">
          <div class="no-pager">
            <ul>
              <li v-for="comCar in comCarList">
                <a href="javascript: void(0)">
                  <div class="left measure-img-box">
                    <img class="measure-img" :src="comCar.ev_image">
                  </div>
                  <div class="measure-content">
                    <h4>
                      {{ comCar.ev_title }}
                    </h4>
                    <p class="measure-text">
                      {{ comCar.introduction }}
                    </p>
                    <p class="measure-time">
                      {{ comCar.time }}
                    </p>
                  </div>
                  <div class="clear"></div>
                </a>
              </li>
            </ul>
          </div>
          <div v-show="hasPageCar" class="pager">
            <Page @on-change="morCarMeasure" :total="totalCar" :page-size="4"></Page>
          </div>
        </div>
        <div v-else style="text-align: center;line-height: 600px; font-size: 20px;">
          您暂时未上传爱车测评
        </div>
      </div>
      <div v-show="current === 2" class="measure-list">
        <div v-if="hasComSer">
          <div class="no-pager">
            <ul>
              <li v-for="comSer in comSerList">
                <a href="javascript: void(0)">
                  <div class="left measure-img-box">
                    <img class="measure-img" :src="comSer.ev_image">
                  </div>
                  <div class="measure-content">
                    <h4>
                      {{ comSer.ev_title }}
                    </h4>
                    <p class="measure-text">
                      {{ comSer.introduction }}
                    </p>
                    <p class="measure-time">
                      {{ comSer.time }}
                    </p>
                  </div>
                  <div class="clear"></div>
                </a>
              </li>
            </ul>
          </div>
          <div v-show="hasPageSer" class="pager">
            <Page @on-change="moreSerMeasure" :total="totalSer" :page-size="4"></Page>
          </div>
        </div>
        <div v-else style="text-align: center;line-height: 600px; font-size: 20px;">
          您暂未上传服务测评
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'PersonalMyComment',
    data () {
      return {
        current: 1,
        comCarList: [],
        totalCar: 0,
        pageCar: 0,
        hasComCar: true,
        hasPageCar: false,
        comSerList: [],
        totalSer: 0,
        pageSer: 0,
        hasComSer: true,
        hasPageSer: false,
        firstSer: true
      }
    },
    methods: {
      verify: function () {
        let that = this
        that.getCarMeasure()
      },
      // 获取爱车测评
      getCarMeasure: function () {
        let that = this
        let page = that.pageCar
        that.$chaos.ajax({
          url: '/Evaluation/getEvaluationList',
          userinfo: true,
          data: {
            type: '爱车',
            limit: '4',
            page: page
          },
          callback: function (type, res) {
            if (type === 'success') {
              if (res.result.count) {
                that.totalCar = parseInt(res.result.count)
              }
              if (page === 0 && that.totalCar === 0) {
                that.hasComCar = false
                return false
              }
              that.hasComCar = true
              that.hasPageCar = true
              that.comCarList = res.result.list
            }
          }
        })
      },
      morCarMeasure: function (e) {
        let that = this
        let page = e - 1
        if (that.pageCar === page) {
        } else {
          that.pageCar = page
          that.getCarMeasure()
          let $ = require('jquery')
          $('html,body').animate({
            scrollTop: 200
          }, 200)
        }
      },
      // 获取服务测评
      toSer: function () {
        let that = this
        that.current = 2
        if (that.firstSer) {
          that.firstSer = false
          that.getSerMeasure()
        }
      },
      getSerMeasure: function () {
        let that = this
        let page = that.pageSer
        that.$chaos.ajax({
          url: '/Evaluation/getEvaluationList',
          userinfo: true,
          data: {
            type: '服务',
            limit: '4',
            page: page
          },
          callback: function (type, res) {
            if (type === 'success') {
              if (res.result.count) {
                that.totalSer = parseInt(res.result.count)
              }
              if (page === 0 && that.totalSer === 0) {
                that.hasComSer = false
                return false
              }
              that.hasComSer = true
              that.hasPageSer = true
              that.comSerList = res.result.list
            }
          }
        })
      },
      moreSerMeasure: function (e) {
        let that = this
        let page = e - 1
        if (that.pageSer === page) {
        } else {
          that.pageSer = page
          that.getSerMeasure()
          let $ = require('jquery')
          $('html,body').animate({
            scrollTop: 200
          }, 200)
        }
      },
      setCrumbs: function () {
        let crumbs = []
        crumbs[0] = {
          title: '个人中心',
          link: ''
        }
        crumbs[1] = {
          title: '我发布的车评',
          link: ''
        }
        this.$store.commit('crumbs', crumbs)
      }
    },
    created () {
      this.$emit('changeCurrent', 3)
      this.verify()
      this.setCrumbs()
    },
    activated () {
      this.setCrumbs()
    }
  }
</script>
<style>
  .pager{
    text-align: center;
    padding:20px 0;
  }
  /*分页样式*/
  .ivu-page-total{
    vertical-align: -2px;
  }
  .ivu-page-item-active{
    background: #2d8cf0!important;
  }
  .ivu-page-item-active a, .ivu-page-item-active:hover a{
    color: #fff!important;
  }
  .ivu-page-item{
    border:1px solid #2d8cf0!important;
  }
  .ivu-page-item-jump-next, .ivu-page-item-jump-prev{
    position: relative!important;
  }
  .ivu-page-item-jump-next:after, .ivu-page-item-jump-prev:after{
    position: absolute;
    top: 0px;
  }
</style>
<style scoped>

</style>
